<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Guia do GPS :: Cadastro de Pontos de interesse - Radares, academias, hospitais, padarias, bares, baladas, etc..</title>

	<style type="text/css">
		body{font-family: Verdana; margin: 0}
		#fsup, #frod  {position: absolute; left: 5px; background-color: #000000; height: 23px; filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7; overflow: hidden; }
		#fsup h4{color: #ffffff; font-size: 12px; text-align: center; font-weight: bold; margin-top: 3px;}
		#map{top: 0px; left: 0px; }
		#menu{font-size: 10px; margin-left: 0px; color: #ffffff; position: absolute; width: 160px; padding: 0px; border: 0px; background-color:#000000; filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;}
		#menu a{color:#ffffff}
		#menu h1{font-size: 12px; text-align: center}
		#menu ul, #opt ul{list-style-image:none;list-style-position:outside;list-style-type:none; margin-left: 8px; padding-left: 0px; border-left: 0px}
		
		#boxCadastro .parCadastro{margin-bottom: 15px; clear: both}
		#boxCadastro .parCadastro p{ font-size: 14px; width: 90px; text-align: right; float: left;}
		#boxCadastro .parCaixa{ margin-left: 10px;}
		#boxCadastro #botao{margin-top: 10px; margin-right: 20px; text-align: right}
		
		#parNome, #parDescricao, #parEndereco{width: 230px}
		
		#endereco{width: 350px}
	
		#boxProcura p{font-size: 11px; margin-top: 2px; margin-left: 10px}
		#boxProcura #caixaBusca{margin-left: 10px; margin-right: 10px; margin-bottom: 2px}
		#encontrei{ text-align: right; margin-right: 10px; margin-top: 5px; font-weight: bold}
		#encontrei a{ text-decoration: none; font-size: 12px;}
		#opt ul li{margin-bottom: 3px}
		
		#carregando{text-align: center; font-size: 12px; font-weight: bold; width: 220px; height: 100px; position: absolute; background-color: #ffffff; border: 2px solid #000000}
		#carregando img{border: 0; text-align: center; margin-top: 6px}
		
		.fechar{ position: absolute; left: 380px; top: 2px}
		.fechar img{border:0}
	</style>
	
	<script src="/pontos/javascript/jquery-1.3.js" type="text/javascript"></script>
	<script src="/pontos/javascript/jquery.json-1.3.min.js" type="text/javascript"></script>
	<link type="text/css" href="/pontos/css/ui.all.css" rel="Stylesheet" />	
	<script type="text/javascript" src="/pontos/javascript/jquery-ui-personalized.min.js"></script>
	<script type="text/javascript" src="/pontos/javascript/guia_open.js"></script>
  </head>
  <body onunload="GUnload()" onload="carregaPontos()">

	<div id="map" style="display:none">
		Carregando ...
	</div>
	<div id="fsup" style="display:none">
		<h4>TRACKSOURCE - Sistema colaborativo para cadastro de pontos de interesse</h4>
	</div>
	<div id="frod" style="display:none">
		&nbsp;
	</div>
	
	<div id="boxProcura" style="display:none" title="Buscar endereço">
		<p>Utilize o mesmo formato do Google Maps. Ex: CEP, endereço, coordenadas (latitude, longitude, etc). Caso necessite, ajuste o ponto marcado no mapa arrastando e soltando.</p>
	
		<div id="caixaBusca">
			<input type="text" id="endereco" name="endereco" value="">
			<input type="button" id="envia" value="Buscar!">&nbsp;&nbsp;&nbsp; ou &nbsp;&nbsp;&nbsp;<input type="button" id="envia" value="Usar ponto atual" onclick="getAddressCentro()">
		</div>
		
		<div id="encontrei">
			<a href="#">Próximo Passo >> </a>
		</div>
		
	</div>
	<div id="boxCadastro" style="display: none" title="Detalhes do Ponto">
		
		<div class="parCadastro">
			<p>Nome:</p>
			<div class="parCaixa">
				<input type="text" id="parNome">
			</div>
		</div>
		
		<div class="parCadastro">
			<p>Tipo:</p>
			<select id="parCategoria">
			</select>
		</div>
		
		<div id="boxVelocidade" class="parCadastro">
			<p>Velocidade:</p>
			<select id="parVelocidade">
				<option value="40">40 Km/h</option>
				<option value="50">50 Km/h</option>
				<option value="60">60 Km/h</option>
				<option value="70">70 Km/h</option>
				<option value="80">80 Km/h</option>
				<option value="90">90 Km/h</option>
				<option value="100">100 Km/h</option>
				<option value="110">110 Km/h</option>
				<option value="120">120 Km/h</option>
			</select>
		</div>
		<div id="boxAlerta" class="parCadastro">
			<p>Alerta:</p>
			<select id="parAlerta">
				<option value="50">50 m</option>
				<option value="100">100 m</option>
				<option value="150">150 m</option>
				<option value="200">200 m</option>
				<option value="250">250 m</option>
				<option value="300">300 m</option>
				<option value="350">350 m</option>
				<option value="400">400 m</option>
				<option value="450">450 m</option>
				<option value="500">500 m</option>
			</select>
		</div>
		
		<div class="parCadastro">
			<p>Descrição:</p>
			<input type="text" id="parDescricao">
		</div>

		<div class="parCadastro">
			<p>Endereço:</p>
			<input type="text" id="parEndereco">
		</div>
		
		<div class="parCadastro">
			<p>Cidade:</p>
			<input type="text" id="parCidade"> / <input type="text" id="parUf" size="2" maxlength="2">
		</div>
		
		<div id="botao">
			<input id="btnGrava" type="button" value="Gravar!" onclick="gravaPonto()">
		</div>
		
	</div>
	<div id="menu" title="Menu">
	
		<h1>Categorias</h1>
		<ul id="categorias">
		</ul>
		
		<div id="opt">
		
			<ul>
				<li><a href="javascript:novoPonto()">Incluir novo ponto</a></li>
				<li><a href="javascript:navega();">Navegar para um endereço</a></li>
				<li>Downloads</li>
				<li>Sobre</li>
				<li>Contato</li>
			</ul>
		
		</div>
	</div>
	
	<div id="carregando" style="z-index: 5000">
		<p>Carregando.. aguarde</p>
		<img src="/pontos/images/marker/marca_carregando.gif" alt="Carregando..">
	</div>
	

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJ6jCsRRSkhnks9lFbN676BSUExiqcSYg9ixas7s4TaQbDx70sxQXKgMRctwmMJXZOyDwq1XmBL7FpA" type="text/javascript"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAJ6jCsRRSkhnks9lFbN676BSUExiqcSYg9ixas7s4TaQbDx70sxQXKgMRctwmMJXZOyDwq1XmBL7FpA"></script>
	<script type="text/javascript">
		reasons[G_GEO_SUCCESS]            = "Success";
		reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
		reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
		reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
		reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
		reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
		reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
		reasons[403]                      = "Error 403: Probably an incorrect error caused by a bug in the handling of invalid JSON.";
		
		loadJson(); inicia(); 
	</script>
  </body>

</html>